<template>
	<view style="background-color:aliceblue;">
		<view class="content" style="width: 100%;">
			<view class="uni-flex uni-row" style="padding-left: 38%;">
				<view class="uni-center text" :class="approvaltype == '0' ? 'active' : 'unactive'" id="0" @click="changeuser">未审批</view>
				<view class="uni-center text" :class="approvaltype == '1' ? 'active' : 'unactive'" id="1" @click="changeuser">已审批</view>
			</view>
		</view>
		<view style="width: 100%;"/>
		   <view v-for="(a,index) in activitylist" class="shadow" style="margin-left: 5%; width: 90%;align-self: center;display: flex;flex-direction: row;justify-content:space-between;margin-bottom: 15px;">
				<view style="width: 50%;"><image mode='aspectFill' :src="httpurl+a.a_cover" style="height: 130px;width: 160px;" @click="activity_detail(a.a_id,approvaltype)"></image></view>
				<view style="width: 50%;">
					<view style="margin-top: 10px; margin-left: 10px;font-weight: 500;">{{a.a_name}}</view>
					<view style="margin-left: 10px;font-size: 13px;color: #f8af41;" >{{a.a_start_time,a.a_end_time}}</view>
					<view style="margin-left: 10px;font-size: 13px;color: #808080;">{{a.type_name}}</view>
					<view v-if="a.is_end=='0'" style="margin-left: 10px;font-size: 20px;font-weight: 300;margin-top: 15px;">进行中</view>
					<view v-if="a.is_end=='1'" style="margin-left: 10px;font-size: 20px;font-weight: 300;margin-top: 15px;">{{'+'+a.a_reward}}</view>
				</view>
			</view>  
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				passedactivitylist:[],
				notpassedactivitylist:[],
				activitylist:[],
				approvaltype:'0',
				httpurl: getApp().globalData.weburl,
			}
		},
		onPullDownRefresh() {
		 console.log('下拉刷新');
		 this.getActivity();
		 uni.stopPullDownRefresh();
		},
		methods: {
			changeuser(e){
				console.log("切换选择内容为："+e.currentTarget.id);
				this.approvaltype=e.currentTarget.id;
				console.log(this.approvaltype);
				if(this.approvaltype == '0'){
					this.activitylist = this.notpassedactivitylist;
				}
				if(this.approvaltype == '1'){
					this.activitylist = this.passedactivitylist;
				}
			},
			getActivity(){
				var that = this;
				uni.request({
					//获取待审批活动
				    url: that.httpurl+'getActivityApply', //服务器地址+接口名
					method: 'POST',
					data:{
						M_id:getApp().globalData.userid
					},
				    header: {
					  'X-Requested-With': 'XMLHttpRequest',
					  "Accept": "application/json",
					  "Content-Type": "application/json; charset=UTF-8"
					 },
					dataType: 'json',
				 success: (res) => {
					 console.log(res.data);
					 that.notpassedactivitylist = res.data['notpassedactivitylist'];
					 that.activitylist = that.notpassedactivitylist;
				 },
				 fail:(res) =>{
					 console.log("获取待审批活动失败");
					 }
				 })
				 uni.request({
				 	//获取审批完成活动
				     url:that.httpurl+'getPassedActivity', //服务器地址+接口名
				 	method: 'POST',
					data:{
						M_id:getApp().globalData.userid
					},
				     header: {
				 	  'X-Requested-With': 'XMLHttpRequest',
				 	  "Accept": "application/json",
				 	  "Content-Type": "application/json; charset=UTF-8"
				 	 },
				 	dataType: 'json',
				  success: (res) => {
					  console.log(res.data);
				 	 that.passedactivitylist = res.data['passedactivitylist'];
				  },
				  fail:(res) =>{
				 	 console.log("获取审批完成活动失败");
				 	 }
				  })
				},
			activity_detail(a_id,type){
				console.log(a_id);
				uni.navigateTo({
					url:"./activitydetail/activitydetail?a_id="+a_id+"&type="+type,
				})
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:'活动审批'
			})
			this.getActivity();
			this.activitylist = this.notpassedactivitylist;
		}
		
		}
</script>

<style>
.card{
	position: absolute; 
	width:100%;
	height:auto; 
	top:15%;
	display: flex; 
	flex-direction: row; 
	/*align-items: center;  //垂直居中*/
	justify-content: center; //水平居中
}
.login_form{
	width:85%;
	height: auto;
	background-color:white;
	border-radius: 10px;
	display: flex;
	flex-direction: row; 
	/*align-items: center;  //垂直居中*/
	justify-content: center; //水平居中
}
.content{
	width:90%;
	height: auto;
}

.shadow{
	box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, .3);
}
.active{
	border-bottom:2px solid #528FFF;
	color:#528FFF;
	font-weight: 450;
}

.text {
	margin: 15rpx 15rpx;
	padding: 0 5rpx;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	font-size: 30rpx;
}
.input{
	margin-top: 10px;
	border-radius: 10px;
	background-color: #eaeeee;
}


.user-insert-line::before {
    position: absolute;
    right: 25px;
    bottom: 0;
    top: 6rem;
    left: 32px;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #a3a2a6;
}
.bottom-line{
	border-top:1px solid #bfbec2;
	padding: 3%;

}

</style>
